<template>
  <div>
    <el-select
      v-model="currentValue"
      :multiple="multiple"
      :disabled="disabled"
      :clearable="clearable"
      filterable
      remote
      placeholder="请选择推荐位"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="change"
    >
      <el-option v-for="item in optionList" :key="item.key" :label="item.display_name" :value="item.key">{{ item.display_name }}</el-option>
    </el-select>
  </div>
</template>

<script>
import { getRecommendList } from "@/api/business/recommend";
export default {
  name: "ApeRecommendSelector",
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Array],
      default: undefined
    }
  },
  data() {
    return {
      currentValue: this.value,
      items: [],
      optionList: [],
      loading: false
    };
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    change(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    },
    load() {
      this.getList();
    },
    remoteMethod(query) {
      if (query) {
        this.optionList = this.items.filter(item => {
          return item.display_name.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      } else {
        this.optionList = this.items;
      }
    },
    getList() {
      this.loading = true;
      getRecommendList().then(result => {
        this.items = result;
        this.optionList = this.items;
        this.loading = false;
      });
    }
  }
};
</script>
